/*
    Copyright 2011 - Tommi Laukkanen (www.substanceofcode.com)

    This file is part of NewsFlow.

    NewsFlow is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    NewsFlow is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with NewsFlow. If not, see <http://www.gnu.org/licenses/>.
*/

import Qt 4.7

Item {
    id: menuItem
    signal clicked(string action)
    width: parent.width
    height: 160
    anchors.centerIn: parent
    state: "hidden"

    Rectangle {
        id: tagDialog
        width: parent.width
        y: 0
        height: tagButtonContainer.y + tagButtonContainer.height + 30

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#ccc" }
            GradientStop { position: 0.9; color: "#ccc" }
            GradientStop { position: 1.0; color: "#999" }
        }

        Text {
            id: tagLabel
            text: "Add tags (e.g. Mobile,MeeGo)"
            font.pixelSize: 22
            y: 20
            x: 10
        }

        Rectangle {
            id: tagTextContainer
            height: tagText.height + 10
            width: parent.width-20
            x: 10
            y: tagLabel.y + tagLabel.height
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#ccc" }
                GradientStop { position: 0.1; color: "#fafafa" }
                GradientStop { position: 1.0; color: "#fff" }
            }
            radius: 5
            border.width: 1
            border.color: "#aaa"
            smooth: true

            TextInput {
                id: tagText
                text: tagDialogItem.tags
                width: parent.width - 10
                x: 5
                y: 5
                color: "#111"
                font.pixelSize: 22
                focus: true
            }
        }

        Rectangle {
            id: tagButtonContainer
            radius: 5
            color: "#999"
            x: 10
            width: parent.width - 20
            height: 70
            y: tagTextContainer.y + tagTextContainer.height + 20

            Button {
                id: tagButton
                label: "tag"
                width: parent.width/2 - 15
                x: 10
                y: 10
                onClicked: {
                    var tags = tagText.text;
                    tagDialogItem.clicked( tags );
                    tagDialogItem.state = "hidden"
                }
            }

            Button {
                id: cancelButton
                label: "Cancel"
                width: parent.width/2 - 15
                x: parent.width/2 + 5
                y: 10
                onClicked: {
                    tagDialogItem.state = "hidden"
                }
            }
        }

        Image {
            visible: !theme.isWhite()
            source: "../pics/top-shadow.png"
            y: parent.height
            height: 16
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
        }
    }

    states:
        State {
        name: "hidden"
        PropertyChanges {
            target: tagDialog
            y: 0 - tagDialog.height - 16
        }
    }
    State {
        name: "shown"
        PropertyChanges {
            target: tagDialog
            y: 0
        }
    }

    transitions: Transition {
        SequentialAnimation {
            PropertyAnimation {
                target: tagDialog
                properties: "y"
                duration: 600
                easing.type: "OutQuad"
            }
        }
    }

}
